<template>
	<view style="display: flex;flex-direction: column;background-color: #F4EFE6;flex: 1;">
		<!-- 拜祖动态 -->
		<view class="bz-pmd-view" v-if="userPQD">
			<image class="bz-pmd-img" src="../../static/icon-baizu-laba.png"></image>
			<text class="bz-pmd-tip">拜祖动态：</text>
			<swiper class="bz-pmd-swiper" :indicator-dots="false"
			 autoplay="true" :interval="1500" :circular="true"
			:duration="500" vertical="true">
				<swiper-item v-for="(item,index) in pmdData" :key="index">
					<text class="bz-pmd-swiper-item">{{item.message}}</text>
				</swiper-item>
			</swiper>
		</view>
		<!--姓氏搜索-->
		<input class="bz-search-input" placeholder="搜索" type="text" confirm-type="search"
		 @confirm="searchXing"  @input="onKeyInput"/>
		<!-- banner -->
		<view v-if="bannerData.length>0">
			<swiper class="bz-banner" :indicator-dots="false"
			 autoplay="true" :interval="3000" :circular="true"
			:duration="1000">
				<swiper-item v-for="(item,index) in bannerData" :key="index">
					<image class="bz-banner-item" :src="item.url" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 皇帝图 -->
		<view class="bz-huangdi-view">
			<image class="bz-huangdi-img" src="http://c.shiqin.wang/photo/huang.png" mode="scaleToFill"></image>
			<text class="bz-huangdi-name">{{huangDiData[0].call_name}}</text>
		</view>
		<view style="width: 100%;height: 20rpx;background-color: #F5F5F5;"></view>
		<!-- 得姓始祖 -->
		<view style="flex: 1;flex-direction: column;display: flex;justify-content: center;align-items: center;">
			<image class="bz-dexing-image" src="../../static/icon-bz-dexing-title.png"></image>
			<!-- 字母列表 -->
			<view class="bz-zimu-item">
				 <text  v-for="(item , index) in zimuList" :class="isSelectZimu==index?'bz-zimu-item-tv-select':'bz-zimu-item-tv'"
				 @click="selectData" :data-index="index">{{item.name}}</text>
			</view>
			<!--姓氏列表-->
			<view class="bz-xingshi-view">
				<view class="bz-xingshi-item"  v-for="(item , index) in selectZXList" @click="menuClick" :data-index="item.call_name">
					<view class="bz-xingshi-item-img-view">
						<image class="bz-xingshi-item-img" :src="item.photo" mode="scaleToFill"></image>
						<text class="bz-xingshi-item-img-name">{{item.name}}</text>
					</view>
					<text class="bz-xingshi-item-xing">{{item.call_name}}</text>
				</view>
			</view>
		</view>
		<button class="share-page-btn" open-type="share">
			<image style="width: 315rpx;height: 96rpx;" src="../../static/icon_page_share_btn.png" mode="scaleToFill"></image>
		</button>
		<LoginTipDialog :isShow="isShowLoginTip" dataSource="登录查看具体信息"  @returnLoginTipDialog="returnLoginTipDialog"/>
	</view>
</template>

<script>
	import LoginTipDialog from "@/components/login-tip-dialog/login-tip-dialog.vue";
	import request from '../index/request.js';
	import cnchar from 'cnchar';
	export default {
		components: {
			LoginTipDialog
		},
		data() {
			return {
				isSelectZimu:-1,
				pmdData:[
				],
				bannerData:[
				],
				huangDiData:[],
				zimuList: [{
						name: "A"
					},
					{
						name: "B"
					},
					{
						name: "C"
					},
					{
						name: "D"
					},
					{
						name: "E"
					},
					{
						name: "F"
					},
					{
						name: "G"
					},
					{
						name: "H"
					},
					{
						name: "I"
					},
					{
						name: "J"
					},
					{
						name: "K"
					},
					{
						name: "L"
					},
					{
						name: "M"
					},
					{
						name: "N"
					},
					{
						name: "O"
					},
					{
						name: "P"
					},
					{
						name: "Q"
					},
					{
						name: "R"
					},
					{
						name: "S"
					},
					{
						name: "T"
					},
					{
						name: "U"
					},
					{
						name: "V"
					},
					{
						name: "W"
					},
					{
						name: "X"
					},
					{
						name: "Y"
					},
					{
						name: "Z"
					},
					{
						name: "全"
					}
				],
				zuxianList:[
				],
				selectZXList:[],
				searchKey:"",
				isShowLoginTip:false,
				userPQD:"",
			}
		},
		onShow:function(){
			var user = uni.getStorageSync("shiqin-user")
			this.share.title = "寻根拜祖"
			this.share.url= '/pages/his-roots/index?appInviteId='+this.appUtil.getAppInviteId()
			this.share.shareType=0
			this.userPQD=user.PQD
			this.loginState()
			if (user.PQD) {
				this.getAncestorsRollList()
				this.getMp3List()
			}
		},
	
		onLoad: function(options) {
			this.appUtil.saveAppInviteId(options)
			this.getAncestorList()
		},
		methods: {
			loginState:function(){
				var user = uni.getStorageSync("shiqin-user")
				if (!user.PQD) {
					this.isShowLoginTip=true
				}
			},
			returnLoginTipDialog:function(e){
				this.isShowLoginTip=e.isclose
				if(e.tag){
					uni.navigateTo({
						url:"../index/index"
					})
				}
			},
			getAncestorList:function(){
				var that=this
				request.post("api/common/ancestorslist", {
					type: "0"
				}).then(data => {
					for (var i = 0; i < data.datas.length; i++) {
						if(data.datas[i]['lave']===2){
							that.huangDiData.push(data.datas[i])
						}else if(data.datas[i]['lave']===3){
							that.zuxianList.push(data.datas[i])
						}
					}
					that.zuxianList.forEach(item => {
						that.selectZXList.push(item)
					})
				})
			},
			getAncestorsRollList:function(){
				var that=this
				request.post("api/common/ancestors_rolllist", {
					lave: "0"
				}).then(data => {
					that.pmdData=data
				})
			},
			getMp3List:function(){
				var that=this
				request.post("api/common/getwebset", {
				}).then(data => {
					that.bannerData=data.AncestorTopPic
				})
			},
			selectData:function(e){
				var index=e.currentTarget.dataset.index
				this.isSelectZimu=index
				for (var i = 0; i < this.selectZXList.length; i++) {
					this.selectZXList.splice(i)
				}
				if(index===26){
					this.zuxianList.forEach(item => {
						this.selectZXList.push(item)
					})
				}else{
					this.zuxianList.forEach(item => {
						var xing=""
						if(item.call_name.length>1){
							xing=item.call_name.substr(0,1)
						}else{
							xing=item.call_name;
						}
						var shouzimu=cnchar.spell(xing,'first','up')
						if (shouzimu === this.zimuList[index].name) {
							this.selectZXList.push(item)
						}
					})
				}
			},
			onKeyInput: function(event) {
				this.searchKey = event.target.value
			},
			menuClick:function(e){
				uni.navigateTo({
					url: '/pages/home-menu-detail/index?title=始祖&xing='+e.currentTarget.dataset.index
				})
			},
			searchXing:function(){
				if(this.searchKey.length>2){
					uni.showToast({
						title:"搜索姓氏不能超过两个字符",
						icon:"none"
					})
					return	
				}
				if(this.searchKey){
					for (var i = 0; i < this.selectZXList.length; i++) {
						this.selectZXList.splice(i)
					}
					this.zuxianList.forEach(item => {
						if (item.call_name.includes(this.searchKey)) {
							this.selectZXList.push(item)
						}
					})
				}else{
					this.zuxianList.forEach(item => {
						this.selectZXList.push(item)
					})
				}
			},
		}
	}
</script>

<style>
	@import "index.css";
</style>
